<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------- 流调管理--密接人员管理 ---------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- -----------------------------------新增---------------------------------- -->
<!-- --------------------------------基本信息--------------------------------- -->

<template>
  <div class="box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="关联病例:" prop="name">
        <el-button type="primary" style="width: 100px">选择</el-button>
      </el-form-item>

      <el-form-item label="姓名:" prop="name">
        <el-input v-model="ruleForm.name" style="width: 500px" />
      </el-form-item>

      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="男" value="男" />
          <el-radio label="女" value="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生年月:" prop="birthday">
        <el-date-picker
          v-model="ruleForm.birthday"
          type="date"
          placeholder="请选择"
          :default-value="new Date()"
          style="width: 500px"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      <el-form-item label="身份证/护照号:" prop="idNum">
        <el-input v-model="ruleForm.idNum" style="width: 500px" />
      </el-form-item>
      <el-form-item label="职业:" prop="job">
        <el-input v-model="ruleForm.job" style="width: 500px" />
      </el-form-item>
      <el-form-item label="联系电话:" prop="phoneNum">
        <el-input v-model="ruleForm.phoneNum" style="width: 500px" />
      </el-form-item>

      <el-form-item label="现住地:" prop="address">
        <el-input
          v-model="ruleForm.address"
          style="width: 500px"
          placeholder="请输入地址"
        />
      </el-form-item>
      <!-- img -->

      <el-form-item label="疫苗接种记录:" prop="patientVaccinationList">
        <el-table
          :data="patientVaccinationList"
          style="width: 40%"
          border="true"
        >
          <el-table-column
            prop="inoculationNum"
            label="接种次数"
            width="180"
            align="center"
          />
          <el-table-column
            prop="vaccineBrand"
            label="疫苗品牌"
            width="180"
            align="center"
          />
          <el-table-column
            prop="inoculationTime"
            label="接种时间"
            align="center"
          />
        </el-table>
      </el-form-item>
      <div style="height: 100px"></div>

      <el-form-item
        label="同居住家庭成员信息:"
        prop="familyInformation"
        style="margin-right: 100px"
      >
        <el-input
          v-model="ruleForm.familyInformation"
          style="height: 150px; width: 500px"
        />
      </el-form-item>

      <div style="height: 100px"></div>
      <el-form-item label="与感染者关系:" prop="relationship">
        <el-input v-model="ruleForm.relationship" style="width: 500px" />
      </el-form-item>

      <el-form-item label="是否医务人员:" prop="medicalStaff">
        <el-radio-group v-model="ruleForm.medicalStaff">
          <el-radio label="是" value="true" />
          <el-radio label="否" value="false" />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="接触方式:" prop="contactMode">
        <el-select
          v-model="ruleForm.contactMode"
          placeholder="请选择"
          style="width: 500px"
        >
          <!-- <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" /> -->
        </el-select>
      </el-form-item>

      <el-form-item label="末次接触时间:" prop="lastContactTime">
        <el-date-picker
          v-model="ruleForm.lastContactTime"
          type="date"
          placeholder="请选择"
          :default-value="new Date()"
          style="width: 500px"
          :disabled-date="disabledDate"
        />
      </el-form-item>

      <el-form-item label="暴露类型:" prop="exposureType">
        <el-select
          v-model="ruleForm.exposureType"
          placeholder="请选择"
          style="width: 500px"
        >
          <!-- <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" /> -->
        </el-select>
      </el-form-item>

      <el-form-item label="管控时间:" prop="controlTime">
        <el-date-picker
          v-model="ruleForm.controlTime"
          type="date"
          placeholder="请选择"
          :default-value="new Date()"
          style="width: 500px"
          :disabled-date="disabledDate"
        />
      </el-form-item>

      <el-form-item label="管控情况:" prop="controlSituation">
        <el-input v-model="ruleForm.controlSituation" style="width: 500px" />
      </el-form-item>

      <el-form-item label="是否出现症状:" prop="symptoms">
        <el-radio-group v-model="ruleForm.symptoms">
          <el-radio label="是" value="true" />
          <el-radio label="否" value="false" />
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="症状描述:"
        prop="symptomDescription"
        style="margin-right: 100px"
      >
        <el-input
          v-model="ruleForm.symptomDescription"
          style="height: 150px; width: 500px"
        />
      </el-form-item>

      <div style="height: 100px"></div>

      <el-form-item label="出现时间:" prop="occurrenceTime">
        <el-date-picker
          v-model="ruleForm.occurrenceTime"
          type="date"
          placeholder="请选择"
          :default-value="new Date()"
          style="width: 500px"
          :disabled-date="disabledDate"
        />
      </el-form-item>

      <el-form-item label="证实材料:" prop="supportingMaterials">
        <el-button style="width: 100px">上传</el-button>
      </el-form-item>

      <el-form-item style="padding-top: 70px">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="sureAdd(ruleFormRef)">
          确定
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, ref, toRefs } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRoute } from "vue-router";
import axios from "@/util/http";
import router from "@/router";

export default defineComponent({
  name: "AddBasicInformationOfSecretConnection",
  setup() {
    const formSize = ref("large");
    const ruleFormRef = ref<FormInstance>();
    const route = useRoute();

    let RuleForm = reactive({
      ruleForm: {
        id: null,
        jointType: "",
        associatedCases: ref(),
        name: "",
        sex: "",
        birthday: "",
        idNum: "",
        job: "",
        phoneNum: "",
        address: "",
        familyInformation: "",
        relationship: "",
        medicalStaff: true,
        contactMode: "",
        lastContactTime: "",
        exposureType: "",
        controlTime: "",
        controlSituation: "",
        symptoms: true,
        symptomDescription: "",
        occurrenceTime: "",
        supportingMaterials: "",
        patientVaccinationList: [
          {
            inoculationNum: "",
            vaccineBrand: "",
            inoculationTime: "",
          },
        ],
      },
      patientVaccinationList: [],
    });

    //输入框判断条件
    const rules = reactive<FormRules>({
      name: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
        { min: 2, max: 5, message: "请输入正确的姓名", trigger: "blur" },
        {
          pattern: /^([\u4E00-\u9FA5]+|[a-zA-Z]+)$/,
          message: "姓名只能包含汉子或者英文",
          trigger: ["change", "blur"],
        },
      ],
      sex: [
        {
          required: true,
          message: "请选择性别",
          trigger: "change",
        },
      ],
      birthday: [
        {
          required: true,
          message: "请选择出生年月",
          trigger: ["change", "blur"],
        },
      ],
      idNum: [
        {
          required: true,
          message: "请输入身份证号码",
          trigger: "blur",
        },
        { min: 18, max: 18, message: "请输入正确的身份证号", trigger: "blur" },
        {
          pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
          message: "身份证号码输入错误",
          trigger: ["change", "blur"],
        },
      ],
    });

    //日期禁用
    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now();
    };

    // 确认新增
    const sureAdd = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      let user = localStorage.getItem("userName");

      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log(RuleForm.ruleForm.sex);

          axios({
            method: "post",
            url: `/cryptographer/addClosePatient?operator=${user}`,
            data: RuleForm.ruleForm,
          }).then((res) => {
            console.log(res);
            if (res.data.msg == "添加成功") {
              router.push("/ManagementOfConfidentialPersonnel");
            }
          });
        } else {
          console.log("error submit!", fields);
        }
      });
    };

    const resetForm = () => {
      router.push("/ManagementOfConfidentialPersonnel");
    };

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${idx + 1}`,
    }));

    return {
      formSize,
      ruleFormRef,
      // ruleForm,
      rules,
      sureAdd,
      resetForm,
      options,
      // tableData,
      ...toRefs(RuleForm),
      disabledDate,
    };
  },
});
</script>

<style scoped lang="less">
.box {
  width: 100%;
  background-color: #fff;
}
.el-form {
  width: 90%;
  background-color: #fff;
  padding-top: 100px;
}
.el-form-item {
  height: 50px;
}
</style>
